<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/toastr.min.css"/>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/toastr.min.js"></script>
    <title>用户注册</title>
</head>
<body>

<%-- 使用 JSP 动态包含技术 将导航加载进来 --%>
<jsp:include page="/WEB-INF/common/nav.jsp"/>

<article>
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <!-- 上传表单-->
            <div class="upload">
                <h1>用户注册①<em>填写信息、完成用户注册第一步。已有账号，请点击<a href="${pageContext.request.contextPath}/login">登录</a></em></h1>
                <!-- 注册步骤导航-->
                <div class="reg_step">
                    <a class="step">注册信息</a><a class="step2">基本信息</a><a class="step2">注册完成</a>
                </div>

                <form action="${pageContext.request.contextPath}/user/register" autocomplete="off" id="myform" method="POST">
                    <p>
                        <label>手机号：</label>
                        <input class="upt" type="text" name="tel" v-model.number.trim="tel" @change="checkTel"/>
                        <em>{{error.tel}}</em>
                    </p>
                    <p>
                        <label>密码：</label>
                        <input class="upt" type="password" name="password" v-model.trim="password" @change="checkPwd"
                               placeholder="密码长度为6-20位"/>
                        <em>{{error.password}}</em>
                    </p>
                    <p>
                        <label>确认密码：</label>
                        <input class="upt" type="password" placeholder="请再次输入密码"
                               @change="checkPwd2" v-model.trim="confirmPassword"/>
                        <em>{{error.confirmPassword}}</em>
                        <span class="source-tag-msg">两次输入的密码必须保持一致</span>
                    </p>

                    <p>
                        <label>电子邮箱：</label>
                        <input id="email" class="upt" type="text" name="email" v-model.trim="email"
                               @change="checkEmail"
                               placeholder="请输入邮箱"/>
                        <em>{{error.email}}</em>
                        <span class="source-tag-msg">您丢失密码后找回密码的凭证</span>
                    </p>

                    <p><a class="btn" @click="handlerRegister">注册</a></p>
                </form>
            </div>
        </section>
    </div>
</article>
<jsp:include page="/WEB-INF/common/footer.jsp" />



<%-- https://github.com/CodeSeven/toastr --%>
<script>

    new Vue({
        el: "#main",
        data: {
            tel: "${user.tel}",
            password: "",
            confirmPassword: "",
            email: "${user.email}",
            error: {
                tel: '',
                password: "",
                confirmPassword: "",
                email: "",
            },
            errorMsg: '${error}' , // 从后台返回的数据
        },
        methods: {
            checkTel(event) {
                if (this.tel == '') {
                    toastr.error('手机号不能为空')
                    return false;
                }
                // 获取手机号
                if (!/^1[3-9]\d{9}$/.test(this.tel)) {
                    toastr.error('手机号格式不正确')
                    return false;
                }
                return true ;
            },
            checkPwd(event) {
                if (this.password == '') {
                    toastr.error('密码不能为空')
                    return false;
                }
                if (this.password.length < 6 || this.password.length > 20) {
                    toastr.error('密码的长度应该在6~20位')
                    return false;
                }
                this.error.password = '';
                return true ;
            },
            checkPwd2(event) {
                if (this.password != this.confirmPassword) {
                    toastr.error('两次输入的密码不一致')
                    return false;
                }
                return true ;
            },
            checkEmail(event) {
                if (this.email == '') {
                    toastr.error('邮箱不允许为空')
                    return false;
                }
                if (!/^\w+@\w+(\.\w+){1,2}$/.test(this.email)) {
                    toastr.error('邮箱格式不正确')
                    return false;
                }
                return true ;
            },
            handlerRegister(event) {
                if (this.checkTel() && this.checkPwd() && this.checkPwd2() && this.checkEmail()) {
                    // 提交请求到服务器
                    document.querySelector("#myform").submit();
                }
            }
        },
        mounted() {
            if (this.errorMsg != "") {
                toastr.error(this.errorMsg);
            }
        }
    });

</script>
</body>
</html>